<template style="overflow-y: scroll; overflow-x: hidden; height: 100%">
  <el-drawer
    :title="label"
    size="37%"
    :visible.sync="dialog"
    custom-class="demo-drawer"
    :before-close="handleClose"
  >
    <div class="demo-drawer__content">
      <el-form
        :rules="cellRules"
        :model="cellForm"
        label-width="60px"
        label-position="right"
        class="demo-dynamic"
        ref="form"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="列起始" prop="colOffset">
              <el-input disabled type="number" v-model="cellForm.colOffset" min="1" max="99" style="width: 80px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="列跨度" prop="colSpan" label-width="75px">
              <el-input type="number" v-model="cellForm.colSpan" min="1" :max="colMax" style="width: 80px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="行起始" prop="rowOffset">
              <el-input disabled type="number" v-model="cellForm.rowOffset" min="1" max="99" style="width: 70px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行跨度" prop="rowSpan" label-width="75px">
              <el-input type="number" v-model="cellForm.rowSpan" min="1" :max="rowMax" style="width: 80px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="类型" prop="type">
          <el-select v-model="cellForm.type"></el-select>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input type="text" v-model="cellForm.content"></el-input>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button  v-if="cellForm.dataCellId" type="primary" @click="handleUpdate"> 修 改 </el-button>
        <el-button v-else type="primary" @click="handleCommit"> 确 定 </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { saveDataCell, updateDataCell } from '@/api/rs/manufactureRecordTemplate'

export default {
  props: ['dialogVisible'],
  data() {
    let checkColSpan = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('内容不可为空'))
      } else if (this.cellForm.rowSpan > this.minRow) {
        if (value > this.minRow) {
          callback(new Error('数值不得大于' + this.minRow))
        } else {
          callback()
        }
      } else if (value > this.colMax) {
          callback(new Error('数值不得大于' + this.colMax))
      } else {
        callback()
      }
    }

    let checkRowSpan = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('内容不可为空'))
      } else if (this.cellForm.colSpan > this.minCol) {
        if (value > this.minRow) {
          callback(new Error('数值不得大于' + this.minRow))
        } else {
          callback()
        }
      } else if (value > this.rowMax) {
        callback(new Error('数值不得大于' + this.rowMax))
      } else {
        callback()
      }
    }

    return {
      label: '',
      dialog: false,
      loading: false,
      cellForm: {
        colOffset: 1,
        colSpan: 1,
        rowOffset: 1,
        rowSpan: 1,
        type: 0,
        content: '',
        dataTableId: 0,
        dataTemplateId: 0
      },
      cellRules: {
        colSpan: [{ required: true, validator: checkColSpan, trigger: 'change' }],
        rowSpan: [{ required: true, validator: checkRowSpan, trigger: 'change' }],
        type: [{ required: true, message: '输入内容不可为空', trigger: 'change' }],
        content: [{ required: true, message: '输入内容不可为空', trigger: 'change' }]
      },
      dataTables: null,
      rowMax: 1,
      colMax: 1,
      minRow: 1,
      minCol: 1
    }
  },
  watch: {
    dialogVisible(val) {
      console.log(val, 'val')
      this.cellForm = {
        colOffset: 1,
        colSpan: 1,
        rowOffset: 1,
        rowSpan: 1,
        type: 0,
        content: '',
        dataTableId: 0,
        dataTemplateId: 0
      },
      this.dialog = val.dialogVisible
      this.label = val.label
      this.cellForm.dataTableId = val.dataTableId
      this.cellForm.dataTemplateId = val.dataTemplateId
      this.cellForm.rowOffset = val.rowOffset
      this.cellForm.colOffset = val.colOffset
      this.rowMax = val.rowMax
      this.colMax = val.colMax
      this.minRow = val.minRow
      this.minCol = val.minRow
      if (val.saveData) {//如果是修改，重新赋值
        this.cellForm = val.saveData
      }
    }
  },
  mounted() {
    this.dialogVisible
  },
  methods: {
    handleCancel() {
      this.dialog = false
    },
    handleClose() {
      this.dialog = false
    },
    handleCommit() {
      console.log(this.cellForm, 'this.cellForm')
      this.$refs.form.validate(vali => {
        console.log(vali, 'vali')
        if (vali) {
          saveDataCell(this.cellForm).then(res => {
            this.dataTables = res.data.dataTables
            this.$message.success("添加成功")
            this.dialog = false
            this.$emit('setTableDatas',this.dataTables)
          })
        }
      })
    },
    handleUpdate() {
      this.$refs.form.validate(vali => {
        if (vali) {
          updateDataCell(this.cellForm).then(res => {
            this.dataTables = res.data.dataTables
            this.$message.success("修改成功")
            this.dialog = false
            this.$emit('setTableDatas',this.dataTables)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">

.demo-drawer__footer {
  text-align: center;
  margin-top: 50px;
  padding: 0 20px;
}

</style>>
